<template>
  <section id="settings-section">
    <el-form label-position="left" label-width="90px" :model="mainForm">
      <el-form-item label="收银编号">
        <el-input v-model="mainForm.code" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="启用副屏">
        <el-checkbox
          v-model="mainForm.subScreen.flag"
          @change="checkedChange($event,1,'subScreen')"
        ></el-checkbox>
      </el-form-item>
      <el-form-item label="启用客显">
        <el-row class="flex">
          <el-checkbox
            v-model="mainForm.guestShow.flag"
            @change="checkedChange($event,2,'guestShow')"
          ></el-checkbox>
          <label class="labelName">串口端口</label>
          <el-select
            :disabled="!mainForm.guestShow.flag"
            v-model="mainForm.guestShow.portValue"
            placeholder="请选择"
          >
            <el-option
              v-for="item in allSelect.guestShow.portOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <label class="labelName">波特率</label>
          <el-select
            :disabled="!mainForm.guestShow.flag"
            v-model="mainForm.guestShow.baudValue"
            placeholder="请选择"
          >
            <el-input v-model="BaudAdd" @keyup.enter.native="AddBaud" placeholder="回车新增选项"></el-input>
            <el-option
              v-for="item in allSelect.guestShow.baudOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-row>
        <el-row class="tips">
          <el-button type="primary" plain class="flex">
            <i class="el-icon-warning"></i>请在设备的规格说明书或使用说明上找到客显设备相应的端口和波特率参数
          </el-button>
        </el-row>
      </el-form-item>
      <el-form-item label="启用收银秤">
        <el-row class="flex">
          <el-checkbox v-model="mainForm.cshRegister.flag"></el-checkbox>

          <el-select
            :disabled="!mainForm.cshRegister.flag"
            v-model="mainForm.cshRegister.value"
            placeholder="请选择称型号"
          >
            <el-option
              v-for="item in allSelect.cshRegister.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-row>
      </el-form-item>
      <el-form-item label="启用钱箱">
        <el-row class="flex">
          <el-checkbox v-model="mainForm.cashBox.flag"></el-checkbox>

          <el-select
            :disabled="!mainForm.cashBox.flag"
            v-model="mainForm.cashBox.value"
            placeholder="请选择钱箱"
          >
            <el-option
              v-for="item in allSelect.cashBox.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button class="marginLeft" :disabled="!mainForm.cashBox.flag" type="info" plain>测试</el-button>
        </el-row>
        <el-row>
          <el-checkbox v-model="mainForm.cashBox.hideFlag">
            <span>隐藏钱箱按钮 （隐藏后按F7仍可打开钱箱）</span>
          </el-checkbox>
        </el-row>
      </el-form-item>

      <el-form-item label="打印小票">
        <el-row class="flex" style="white-space: nowrap;">
          <span class="marginRight">打印方式：{{mainForm.printData.modeVal==='portPrint'?'并口打印':'驱动打印'}}</span>
          <span
            class="marginRight"
          >纸张宽度：{{mainForm.printData.widthVal === 'default'?'默认':mainForm.printData.widthVal}}</span>
          <el-link type="primary" @click="editPrint()">编辑</el-link>
          <el-col style="text-align:right;">
            <el-button type="info" class="marginLeft" @click="printTicket()" plain>测试</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-checkbox-group v-model="mainForm.printTicket.value" class="flex flex-hb">
            <el-checkbox
              v-for="item in allSelect.printTicket.options"
              :label="item.label"
              :key="item.label"
            >{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-row>
      </el-form-item>
      <el-form-item label="打印标签">
        <el-row class="flex">
          <el-checkbox v-model="mainForm.printLabel.flag"></el-checkbox>

          <el-select
            :disabled="!mainForm.printLabel.flag"
            v-model="mainForm.printLabel.value"
            placeholder="请选择标签打印机"
          >
            <el-option
              v-for="item in allSelect.printLabel.options"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-button
            type="info"
            :disabled="!mainForm.printLabel.flag"
            class="marginLeft"
            plain
            @click="printLabel()"
          >测试</el-button>
        </el-row>
      </el-form-item>
      <!-- <el-form-item label="打印服务">
        {{mainForm.printService.flag?"正常":'异常'}}，
        端口{{mainForm.printService.PortNum}}&emsp;
        <el-button>重新加载</el-button>
      </el-form-item>-->
      <el-row class="submitLine">
        <el-button type="primary" @click="submitForm()">保存设置</el-button>
      </el-row>
    </el-form>

    <el-dialog :visible.sync="editDialog">
      <strong slot="title" class="dialog-title title">打印设置</strong>
      <el-form :model="printData" label-position="left" label-width="70px">
        <el-row class="flex">
          <el-form-item label="打印方式">
            <el-select
              v-model="printData.modeVal"
              @change="printMode($event) "
              placeholder="请选择打印方式"
            >
              <el-option
                v-for="item in allSelect.printSet.modeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="allSelect.printModeChild.label" class="marginLeft">
            <el-select v-model="printData.modeChildVal" @change="choseTicket($event)">
              <el-option
                v-for="item in allSelect.printModeChild.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="flex">
          <el-form-item label="纸张宽度">
            <el-select
              v-model="printData.widthVal"
              @change="paperWidth($event)"
              placeholder="请选择纸张宽度"
            >
              <el-option
                v-for="item in allSelect.printSet.widthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="打印边距" class="marginLeft">
            <el-select
              v-model="printData.paddingVal"
              :disabled="printData.modeVal === 'portPrint' ? true : false "
            >
              <el-option
                v-for="item in allSelect.printPadding.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="sureBtn">确 定</el-button>
      </div>
    </el-dialog>

    <Print :printFlag="printFlag" @changeFlag="changeFlag" @getPrinters="getPrinters"></Print>
  </section>
</template>
 
 <script>
//引入ipcRenderer对象,该对象和主线程的ipcMain通讯
import { ipcRenderer } from "electron";
import Print from "../../components/Print";

export default {
  components: {
    Print
  },
  data() {
    return {
      printFlag: {}, //打印内容
      position: "left", //form-item的label位置
      BaudAdd: "", //增加的波特率数
      editDialog: false, //打印设置对话框
      formLabelWidth: "120px",

      allSelect: {
        guestShow: {
          portOptions: [
            {
              value: "COM1",
              label: "COM1"
            },
            {
              value: "COM2",
              label: "COM2"
            }
          ], //串口端口
          baudOptions: [
            {
              value: "2400",
              label: "2400"
            },
            {
              value: "4800",
              label: "4800"
            }
          ] //波特率
        }, //客显
        cshRegister: {
          options: [
            {
              value: "爱宝-AB-1560",
              label: "爱宝-AB-1560"
            }
          ]
        }, //启用收银秤
        cashBox: {
          options: [
            {
              value: "27,112,1,128,128",
              label: "27,112,1,128,128"
            },
            {
              value: "27,112,0,60,255",
              label: "27,112,0,60,255"
            }
          ]
        }, //启用钱箱
        printTicket: {
          options: [
            {
              value: "销售后自动打印小票",
              label: "saled"
            },
            {
              value: "退货后自动打印小票",
              label: "return"
            },
            {
              value: "打印销售单号加密",
              label: "encryption"
            }
          ]
        }, //打印小票的选项
        printSet: {
          modeOptions: [
            {
              label: "驱动打印",
              value: "Drive",
              data: {
                value: "driveChild",
                label: "驱动",
                options: [
                  {
                    label: "默认",
                    value: "default"
                  }
                ]
              }
            },
            {
              label: "并口打印",
              value: "portPrint",
              data: {
                label: "并口",
                value: "portPrintChild",
                options: [
                  {
                    label: "LPT1",
                    value: "LPT1"
                  },
                  {
                    label: "LPT2",
                    value: "LPT2"
                  }
                ]
              }
            }
          ],
          widthOptions: [
            {
              label: "默认",
              value: "default",
              data: {
                options: [
                  {
                    label: "默认",
                    value: "default"
                  }
                ]
              }
            },
            {
              label: "58mm",
              value: "58mm",
              data: {
                options: [
                  {
                    label: "默认",
                    value: "default"
                  },
                  {
                    label: "较小边距",
                    value: "minPadding"
                  },
                  {
                    label: "较大边距",
                    value: "maxPadding"
                  }
                ]
              }
            },
            {
              label: "76mm",
              value: "76mm",
              data: {
                options: [
                  {
                    label: "默认",
                    value: "default"
                  },
                  {
                    label: "较小边距",
                    value: "minPadding"
                  },
                  {
                    label: "较大边距",
                    value: "maxPadding"
                  }
                ]
              }
            }
          ]
        }, //打印设置的下拉框数据
        printModeChild: {}, //打印方式的子类下拉框
        printPadding: {}, //打印边距下拉框
        printLabel: {
          options: []
        } //打印机
      }, //所有下拉数据集合

      printData: {}, //打印设置临时数据
      mainForm: {}, //页面操作临时数据
      submitData: {
        code: "2", //编号
        subScreen: {
          flag: false
        }, //启用副屏标识
        guestShow: {
          flag: true,
          portValue: "COM1",
          baudValue: "2400",
          baudOptions: []
        }, //启用客显
        cshRegister: {
          flag: false,
          value: "爱宝-AB-1560"
        }, //启用收银秤
        cashBox: {
          flag: true,
          hideFlag: false,
          value: "27,112,1,128,128"
        }, //启用钱箱
        printData: {
          modeVal: "Drive",
          modeChildVal: "default",
          widthVal: "default",
          paddingVal: "default"
        }, //打印编辑中数据
        printTicket: {
          value: []
        }, //打印小票的选项
        printLabel: {
          flag: true,
          value: ""
        } //打印标签
        // printService: {
        //   flag: true,
        //   PortNum: "8443"
        // } //打印服务
      },
      printList: [] //打印机列表
    };
  },

  created() {
    var that = this;
    document.onkeydown = function(e) {
      var key = window.event.key;
      switch (key) {
        case "F9":
          that.$router.push("/openOrder");
          break;
        default:
          break;
      }
    };
    if (!that.$S.get("settings-form")) {
      that.$S.set("settings-form", that.submitData);
    }
    that.mainForm = that.$F.deepClone(that.$S.get("settings-form"));
    // console.log(that.mainForm, "====that.mainForm====");
    //打印方式的子级赋值
    that.allSelect.printSet.modeOptions.forEach((item, index) => {
      if (item.value === that.mainForm.printData.modeVal) {
        that.allSelect.printModeChild =
          that.allSelect.printSet.modeOptions[index].data;
      }
    });
    ///打印宽度的子级赋值
    that.allSelect.printSet.widthOptions.forEach((item, index) => {
      if (item.value === that.mainForm.printData.widthVal) {
        that.allSelect.printPadding =
          that.allSelect.printSet.widthOptions[index].data;
      }
    });
    //波特率赋值
    if (
      that.mainForm.guestShow.baudOptions &&
      that.mainForm.guestShow.baudOptions.length > 2
    ) {
      that.allSelect.guestShow.baudOptions =
        that.mainForm.guestShow.baudOptions;
    } else {
      var cb = that.allSelect.guestShow.baudOptions.find(
        item => item.value === that.mainForm.guestShow.baudValue
      );
      if (cb === undefined) {
        var obj = {
          value: that.mainForm.guestShow.baudValue,
          label: that.mainForm.guestShow.baudValue
        };
        that.allSelect.guestShow.baudOptions.unshift(obj);
      }
    }
  },

  mounted() {
    this.printFlag = { getPrinters: true };
  },

  watch: {
    BaudAdd: {
      deep: true,
      handler: function(newVal, oldVal) {
        this.BaudAdd = newVal.toString().replace(/[^\d]/g, "");
      }
    }
  },

  methods: {
    // 判断打印机状态
    getPrinters(printList) {
      this.printList = printList;
      this.allSelect.printLabel.options = printList;
      this.allSelect.printSet.modeOptions.forEach((item, index) => {
        if (item.value === "Drive") {
          printList.forEach(item => {
            var obj = { value: item.name, label: item.name };
            this.allSelect.printSet.modeOptions[index].data.options.push(obj);
          });
        }
      });
      if (!this.$store.state.deviceName && this.mainForm.printLabel.value) {
        //  如果已提交设备名且在当前设备数组中，直接存储
        var cb = printList.find(
          item => item.name === this.mainForm.printLabel.value
        );
        this.$store.state.deviceName = cb ? cb.name : "";
      }
    },
    //  增加波特率的选项
    AddBaud() {
      if (!this.BaudAdd) {
        return;
      }
      this.mainForm.guestShow.baudValue = this.BaudAdd;
      var cb = this.allSelect.guestShow.baudOptions.find(
        item => item.value === this.BaudAdd
      );
      if (cb) {
        this.$message({
          message: "波特率已存在！",
          type: "warning"
        });
        this.BaudAdd = "";
        return false;
      } else
        var item = {
          value: this.BaudAdd,
          label: this.BaudAdd
        };
      this.allSelect.guestShow.baudOptions.unshift(item);
      this.BaudAdd = "";
    },
    // 打印方式的编辑按钮
    editPrint() {
      this.editDialog = true;
      this.printData = this.$F.deepClone(this.mainForm.printData);
    },
    //选择打印方式
    printMode(e) {
      this.allSelect.printSet.modeOptions.forEach((item, index) => {
        if (item.value === e) {
          this.allSelect.printModeChild = item.data;
          this.printData.modeChildVal = item.data.options[0].value;
        }
      });
    },
    // 选择标签打印方式的端口
    choseTicket(e) {
      if (this.allSelect.printModeChild.value === "driveChild") {
        if (e === "default") {
          if (this.printList.length == 1) {
            this.$store.state.deviceName = this.printList[0].name;
          } else if (this.printList.length > 1) {
            var cb = "";
            this.printList.forEach(item => {
              if (item.isDefault) {
                cb = item.name;
              }
            });
            this.$store.state.deviceName = cb;
          } else {
            this.$store.state.deviceName = "";
          }
        } else this.$store.state.deviceName = e;
      }
    },
    //选择纸张宽度
    paperWidth(e) {
      this.allSelect.printSet.widthOptions.forEach((item, index) => {
        if (item.value === e) {
          this.allSelect.printPadding = item.data;
          this.printData.paddingVal = item.data.options[0].value;
        }
      });
    },
    // 打印设置的确定
    sureBtn() {
      if (this.printData.modeVal === "portPrint") {
        this.$message({
          message: "64位暂不支持并口打印！",
          type: "error"
        });
        return false;
      }
      if (this.printData.modeChildVal != "default") {
        var cb = this.allSelect.printLabel.options.find(
          item => item.name === this.printData.modeChildVal
        );
        if (cb === undefined) {
          this.$message({
            message: "当前设备未找到！",
            type: "error"
          });
          return false;
        }
      }
      if (this.checkPrint(this.$store.state.deviceName)) {
        this.mainForm.printData = this.$F.deepClone(this.printData);
        this.editDialog = false;
        this.$message({
          message: "设置成功",
          type: "success"
        });
      }
    },
    // 打印小票的测试 this.mainForm.printData.modeChildVal
    printTicket() {
      this.printFlag = {
        flag: 0,
        data: true,
        deviceName: this.$store.state.deviceName,
        padding: this.printData.paddingVal || ""
      };
    },

    // 打印标签的测试
    printLabel() {
      if (this.checkPrint(this.mainForm.printLabel.value)) {
        this.printFlag = {
          flag: 1,
          deviceName: this.mainForm.printLabel.value,
          data: true
        };
      }
    },
    // 判断打印机状态, 本地获取打印机
    checkPrint(deviceName) {
      if (this.printList.length <= 0) {
        this.$message({
          message: "没有检测到打印设备！",
          type: "error"
        });
        return false;
      }
      var deviceName = deviceName || "";
      var printer = this.printList.find(item => item.name === deviceName);
      if (printer && printer.status === 0) {
        return true;
      } else if (!deviceName) {
        this.$message({
          message: "请先设置其他打印机",
          type: "error"
        });
        return false;
      } else {
        this.$message({
          message: "当前打印机不可用,请重新设置",
          type: "error"
        });
        return false;
      }
    },
    // 改变打印标识
    changeFlag() {
      this.printFlag.data = false;
    },

    // 勾选多炫框
    checkedChange(event, flag, obj) {
      // flag 1:副屏；2；客显
      if (obj) {
        this.mainForm[obj].flag = event;
      }
      switch (flag) {
        case 1:
          break;
        case 2:
          if (!event) {
          }
          break;
        default:
          break;
      }
    },
    submitForm() {
      this.mainForm.guestShow.baudOptions = this.allSelect.guestShow.baudOptions;
      this.submitData = this.$F.deepClone(this.mainForm);
      // console.log(this.submitData, "====this.submitData====");
      this.$S.set("settings-form", this.submitData);
      this.$message({
        message: "提交成功",
        type: "success"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
#settings-section {
  padding: 20px 40x;
  .tips {
    margin-top: 10px;
    i {
      font-size: 18px;
      margin-right: 10px;
    }

    .el-button:focus,
    .el-button:hover {
      cursor: initial;
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
  }
  .labelName {
    margin-left: 20px;
    // margin-right: 10px;
    white-space: nowrap;
  }
  .marginRight {
    margin-right: 20px;
  }
  .marginLeft {
    margin-left: 15px;
  }
  .submitLine {
    .el-button {
      padding: 16px 40px;
      font-size: 16px;
    }
  }
}
</style> 
<style  lang="scss">
.el-form {
  padding: 20px 40px;
  width: 702px;
}
.el-form-item__content {
  text-align: left;
}

.submitLine .el-form-item__content {
  margin-left: 200px !important;
}

.el-checkbox {
  margin-right: 0;
}
.el-select {
  width: 100%;
  margin-left: 10px;
}
.el-input.is-disabled .el-input__inner {
  width: 100%;
}
.el-scrollbar {
  .el-input {
    margin: 10px;
    width: auto;
  }
}
.el-link.el-link--primary:hover {
  color: #ff3d3a;
}
.el-link.el-link--primary.is-underline::after {
  border: none;
}
.dialog-title {
  font-size: 18px;
}
.el-dialog__header {
  text-align: left;
}

.el-dialog {
  width: 630px;
  .el-form {
    padding: 0;
    width: auto;
    .el-select {
      width: auto;
      margin-left: 0px;
    }
  }
}
</style>